<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background</title>
    <style>
        .c1{
            height:900px;
            /* 背景可以设置多个属性 */
            background:red url();
            background-repeat: no-repeat;
            /* background-position: center top; */

            /* 以容器左上角作为偏移坐标,并不是以图片 */
            /* background-position: 20px 30px; */
            /* background-size:200px 50px; */
        }

        /* 以下是x倍图缩放方法之一,可以通过过修改图的缩放,偏移,size来读取 */
        .c2{
            width:20px;
            height:20px;
            background:url(./test_bg.png) no-repeat;
            background-position: -17px -5px;

            /* 控制背景图大小 */
            background-size: 261px 113px; 
        }
        .c3{
            width:20px;
            height:20px;
            background:url(./test_bg.png) no-repeat;
            background-position: -169px -23px;
            background-size: 261px 113px;
        }
    </style>
</head>
<body>
    <div class="c1">

    </div>
    <div class="c2">

    </div>
    <div class="c3">

    </div>
</body>
</html>